<template>
  <div class="page">
    <div class="content">
      <div class="user">
        <div class="avatar">
          <img :src="userInfo.avatar" alt="" />
        </div>
        <div class="detail">
          <div class="name">{{ userInfo.name }}</div>
          <div class="phone">{{ userInfo.phone }}</div>
        </div>
        <i class="iconfont icon-xiaoxi"></i>
      </div>
      <div class="big container">
        <div class="jiuZhen">
          <i class="iconfont icon-yuyue"></i>
          <div class="wenzi">
            <h4>就诊人管理</h4>
          </div>
        </div>
        <div class="zhuYuan">
          <i class="iconfont icon-zhifudingjin"></i>
          <div class="wenzi">
            <h4>住院人管理</h4>
          </div>
        </div>
      </div>
      <div class="more container">
        <ul>
      <li v-for="(item, index) in icons" :key="index" @click="goHome">
        <i :class="item.classOne"></i>
        <span>{{ item.label }}</span>
        <i :class="item.classTwo"></i>
      </li>
    </ul>
      </div>
    </div>

    <van-tabbar v-model="active" route>
      <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
      <van-tabbar-item icon="comment-o" to="/message">信息</van-tabbar-item>
      <van-tabbar-item icon="user-o" to="/user">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { getUserInfoApi } from "@/api";

const active = ref(0);
const userInfo = ref([]);
const router = useRouter();

const getUserInfo = async () => {
  let { data } = await getUserInfoApi();
  userInfo.value = data[0];
};
getUserInfo();

// 测试跳转
const goHome = () => {
  router.push("/home"); // 替换 `/path` 为你想要跳转的路由路径
};

const icons = [
  { classOne: "iconfont icon-yuyue", label: "预约挂号记录", classTwo: "iconfont icon-xiayibu" },
  { classOne: "iconfont icon-zhifudingjin", label: "门诊缴费记录", classTwo: "iconfont icon-xiayibu" },
  { classOne: "iconfont icon-yuyue", label: "门诊充值记录", classTwo: "iconfont icon-xiayibu" },
  { classOne: "iconfont icon-zhifudingjin", label: "住院充值记录", classTwo: "iconfont icon-xiayibu" },
  { classOne: "iconfont icon-yuyue", label: "体检预约记录", classTwo: "iconfont icon-xiayibu" },
  { classOne: "iconfont icon-zhifudingjin", label: "病案申请邮寄记录", classTwo: "iconfont icon-xiayibu" },
];

</script>

<style lang="scss" scoped>
@import "@/assets/style/variable.scss";

.content {
  width: 100%;
  height: calc(100% - 50px - 46px);
  position: fixed;
  top: 46px;
  bottom: 50px;
  display: flex;
  flex-direction: column;

  .user {
    display: flex;
    align-items: center;
    height: 80px;

    background: #006eff;

    .avatar {
      width: 60px;
      height: 60px;
      margin: 0 10px;

      img {
        width: 100%;
        height: 100%;
        border-radius: 90px;
      }
    }

    .detail {
      flex: 1;
      height: 60px;
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: self-start;
      justify-content: space-evenly;
    }

    i {
      width: 50px;
      color: #fff;
      height: 50px;
      font-size: 140%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .big {
    border-radius: 10px;
    height: 80px;
    background-color: #fff;
    display: flex;
    box-shadow: 0 0 5px rgba(0.1, 0.1, 0.1, 0.1);
    align-items: center;

    & > div {
      flex: 1;
      height: 80%;
      display: flex;
      flex-direction: column;
      i {
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 180%;
        color: #006eff;
      }

      .wenzi {
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: center;

        h4 {
          color: $text-color;
          color: rgba(106, 135, 169, 0.996078431372549);
        }
      }
    }
  }

  .more {
    flex: 1;

    ul {
      width: 100%;
      height: 100%;
      box-shadow: 0 0 5px rgba(0.1, 0.1, 0.1, 0.1);
      //   background-color: blueviolet;
      display: flex;
      flex-direction: column;

      li {
        flex: 1;
        // border-bottom: 1px solid black;
        display: flex;
        box-shadow: 0 0 1px rgba(0.1, 0.1, 0.1, 0.1);
        align-items: center;
        color: #006eff;

        .one,
        .two {
          width: 20%;
          height: 80%;
          //   background-color: #aabd93;
          margin-right: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .one {
          font-size: 250%;
        }

        .two {
          justify-content: flex-end;
          font-size: 150%;
          color: #006eff;
        }

        span {
          flex: 1;
          height: 80%;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          //   background-color: #f4d0d0;
          font-size: 20px;
          // color: $text-color;
          color: rgba(106, 135, 169, 0.996078431372549);
        }
      }
    }
  }
}
</style>